<template>
    <div class="my" :style="{height:fullHeight}">
        <div class="mybox">
            <div class="mybox_card" v-if="havecard">
                <div class="mybox_card_num">卡号：{{carinfo.card_no}}</div>
                <img src="../assets/logo.png" class="car">
                <img src="../assets/smqrcode.jpg" alt="" class="mybox_card_qr" @click="useqrcode()">                
                <mt-popup v-model="popupVisible" position="center">
                    <!-- <img src="../assets/bigQrcode.jpg" alt="" class="detail_big_img"> -->
                    <div id='code'></div>
                    <canvas id="canvas"></canvas>
                </mt-popup>
                <div class="mybox_card_time">
                    {{carinfo.endtime}} 到期
                </div>
                <div class="mybox_card_timebtn">
                    <span v-if="carinfo.status == 1" @click="topay('renewal',1)">支付</span>
                    <span v-else @click="topay('renewal',2)">续费</span>
                </div>
            </div>
            <div class="mybox_card" v-if="!havecard">
                <img src="../assets/logo.png" class="car">
                <div class="mybox_card_timebtn" @click="topay('renewal',0)">
                    <span >开卡</span>
                </div>
            </div>
        </div>
        <!-- <div class="my_line M0125 arrow" @click="goto('edit',info.memid,info.memname,info.sex,info.birthday,info.mobile)">会员名：{{info.memname}}</div> -->
        <!-- <div class="my_line M029">会员名：{{info.card_no}}</div>
        <div class="my_line M008">性别:</div>
        <div class="my_line M008 arrow">生日</div>
        <div class="my_line M008 arrow">手机号</div> -->
        <div class="my_line edit M029">
            <div class="edit_title">会员名：</div>
            <div class="edit_c"><input type="text" v-model="info.name" @blur="sureName()"/></div>
        </div>
        <div class="my_line edit M008">
            <div class="edit_title">手机号：</div>
            <div class="edit_c"><input type="text" v-model="info.mobile" @blur="sureMobile()"/></div>
        </div>
        <div class="my_line edit M008 arrow" @click="selectSex()">
            <div class="edit_title">性　别：</div>
            <div class="edit_c" v-if="info.sex ==3">保密</div>
            <div class="edit_c" v-if="info.sex ==1">男</div>
            <div class="edit_c" v-if="info.sex ==2">女</div>
        </div>
        <div class="my_line edit M008 arrow" @click="selectDate()">
            <div class="edit_title">生　日：</div>
            <div class="edit_c">{{info.birthday}}</div>
        </div>
        <mt-popup  v-model="popupVisible1" position="bottom" id="sex" lockScroll="true">
            <mt-picker :slots="slots" value-key="name" @change="onValuesChange" showToolbar>
                <div class="sexpickerBtn">
                    <span @click="closesex()">取消</span>
                    <span @click="backPickerSubBtn">确认</span>
                </div>
            </mt-picker>
        </mt-popup>
        <mt-popup v-model="popupVisible2" position="bottom" lockScroll="true" id="birthday">
            <mt-datetime-picker ref="picker" type="date" v-model="dateVal"
            year-format="{value} 年"
            month-format="{value} 月"
            date-format="{value} 日"
            :startDate="startDate"
            :end-date="todaydate"
             @confirm="dateConfirm()">
            </mt-datetime-picker>
        </mt-popup>
        <div class="my_line M029 arrow" @click="goto('recordList',info.memid)">核销记录</div>
    </div>
</template>
<script>
// import getUrlParam from '../../store/modules/getUrlParam'
import cookie from '../../store/modules/cookie'
import QRCode from 'qrcode'
export default {
    components: {
      QRCode: QRCode
    },
    data(){
        return{
            info:{},
            carinfo:{},
            popupVisible:false,
            fullHeight:"",
            popupVisible1:false,
            popupVisible2:false,
            havecard:false,
            slots: [
                {
                values: [{value:1,name:'男'},{value:2,name:'女'},{value:3,name:'保密'}],
                textAlign: 'center'
                }
            ],
            sureSex:{},
            dateVal:new Date(),
            clientHeight:'',
            merid:0,
            startDate:new Date("1930-01-01"),
            todaydate:new Date()
            
        }
    },
    created(){
        this.fullHeight = document.documentElement.clientHeight+"px";
        this.userinfo()
        this.cardinfo()
    },
    mounted() {
      const that = this
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeigh
          that.fullHeight = window.fullHeight
        })()
      }
    },   
    methods:{
        goto(path,id){
            this.$router.push({
                path:'/'+path,
                query:{
                    memid:id
                }
            })
        },
        topay(path,typeid){
            this.$router.push({
                path:'/'+path,
                query:{
                    typeid:typeid
                }
            })
        },
        cardinfo(){
            let openid = cookie.getCookie('openid')
            this.$http.get('/user/member/getMemberCards', {openid: openid}).then((res)=>{
                if(res.code == 0){
                    this.carinfo = res.data
                }else{
                    this.$messagebox({
                        title:"提示",
                        message:res.msg
                    })
                }
            })
        },
        useqrcode(){
            let that = this
            that.popupVisible = true
            let openid = cookie.getCookie('openid')
            var canvas = document.getElementById('canvas')
            that.$http.get('/user/member/getMembervcode',{cardid:that.carinfo.cardid,openid:openid}).then((res)=>{
                if(res.code==0){
                    QRCode.toCanvas(canvas, res.data, function (error) {
                        if (error) console.error(error)
                        console.log('success!');
                    })
                }else{
                    that.$messagebox(res.msg)
                }
            }).catch((res)=>{
                console.log(res.msg)
            })
        },
        userinfo(){
            let openid = cookie.getCookie('openid')
            this.$http.get('/user/member/index', {openid: openid}).then((res)=>{
                if(res.code == 0){
                    this.info = res.data
                    if(res.data.cards_nember <= 0){
                        this.havecard = false
                    }else{
                        this.havecard = true
                    }
                }else{
                    this.$messagebox({
                        title:"提示",
                        message:res.msg
                    })
                }
            })
        },
        //确定姓名
        sureName(){
            let that = this
            let key = 'n'+ that.info.name
            this.$http.get('/user/member/edit',{memid:that.info.memid,key:key}).then((res)=>{
                if(res.code == -1){
                    that.$messagebox('提示',res.msg)
                }
            })
        },
        //确定手机号
        sureMobile(){
            let that = this
            let key = 'm'+ that.info.mobile
            this.$http.get('/user/member/edit',{memid:that.info.memid,key:key}).then((res)=>{
                if(res.code == -1){
                    that.$messagebox('提示',res.msg)
                }
            })
        },
        selectSex(){
            this.popupVisible1 = true
        },
        closesex(){
            this.popupVisible1 = false
        },
        onValuesChange(picker, values) {
            this.sureSex = values[0]
        },
        //性别确定
        backPickerSubBtn() {
            this.info.sex = this.sureSex.value
            let that = this
            let key = 's'+ that.info.sex
            this.$http.get('/user/member/edit',{memid:that.info.memid,key:key}).then((res)=>{
                if(res.code == -1){
                    that.$messagebox('提示',res.msg)
                }
            })
            this.popupVisible1 = false
        },
        selectDate () {
            this.popupVisible2 = true
            if (this.birthday) {
                this.dateVal = this.birthday
            } else {
                this.dateVal = new Date()
            }
            this.$refs['picker'].open()
        },
        //生日确定
        dateConfirm () {
            this.info.birthday = this.format(this.dateVal)
            let that = this
            let key = 'b'+ this.info.birthday
            this.$http.get('/user/member/edit',{memid:that.info.memid,key:key}).then((res)=>{
                if(res.code == -1){
                    that.$messagebox('提示',res.msg)
                }
            }).catch((res)=>{

            })
        },
        format (time) {
            var date = new Date(time) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-'
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
            var D = date.getDate()
            return Y + M + D
        },
        getdata(){
            let that = this
            that.$http.get('').then((res)=>{
                if(res.code==0){
                    res.info = res.data
                }else{
                    that.$messagebox(res.msg)
                }
            }).catch((res)=>{
                console.log(res.msg)
            })
        },
    }
}
</script>
<style scoped>
.my{background-color: #EAECED;}
.mybox{
    background: url('../assets/mybox.jpg') no-repeat center center;
    background-size: 100% 100%;
    width: 100%;
    height: 747px;
    display: flex;
    justify-content: center;
}
.mybox_card{
    background: #000;
    width: 808px;
    height: 485px;
    border-radius: 48px;
    margin: 213px auto;
    color: #fff;
    font-size: 46px;
    text-align: center;
    position: relative;
}
.mybox_card_num{
    font-size: 30px;
    text-align: left;
    padding:0 25px;
    position: absolute;
    top: 57px;
    /* left: 57px; */
    height:37px;
    line-height: 37px;
    z-index: 999;
}
.mybox_card .car{
    width: 497px;
    margin:131px 155px 57px;
}
.mybox_card_time{
    font-size: 30px;
    padding:0 25px;
    text-align: left;
}
.mybox_card_timebtn{
    border:1px solid #fff;
    padding: 5px 15px;
    font-size: 38px;
}
.my_line{
    background-color: #fff;
    height:139px;
    line-height:139px;
    color: #040000;
    font-size: 43px;
    padding: 0 35px;
}
.M0125{margin-top: 6px;}
.M029{margin-top: 14px;}
.M008{margin-top: 4px;}
.arrow{
    background-image:url('../assets/arrow_right.png');
    background-position: 93% center ;
    background-repeat: no-repeat;
    background-size: 13px 24px;
}
.mybox_card_qr{
    position: absolute;
    top: 57px;
    right: 57px;
    width: 74px;
    height:74px;
    z-index: 999;
}
.mint-popup #canvas{
    width: 910px !important;
    height: 910px !important;
}
.edit{
    display: flex;
}
.edit_title{
    flex: 0 0 20%;
}
.edit_c{flex:0 0 75%;}
input{
    height: 134px;
    line-height: 134px;
    border: none;
    width: 100%;
    font-size: 44px;
}
.mint-popup-bottom{
    width: 100%!important;
}
.sexpickerBtn{
    display: flex;
    padding: 5px 15px;
    justify-content: space-between;
    font-size: 48px;
    align-items: center;
}
.mybox_card_timebtn{
    position: absolute;
    bottom:37px;
    right:57px ;
    /* border-radius: 10px; */
}
#sex .picker-items .picker-slot{
    width: 100%;
}
#birthday .picker.mint-datetime-picker{
    border-top: #838181 1px solid;
}
</style>